import './select.css'
var HSelect = {
    name: 'HSelect',
    template: '<div class="my-select" @click="onSelectClicked" ref="parent">' +
        '    <div class="my-current-option">' +
        '      <span>{{currentData?currentData.name:\'\'}}</span>' +
        '      <img src="./images/arrow.png" width="10"/>' +
        '    </div>' +
        '    <div class="option-list" ref="optionList">' +
        '       <div class="search-container" v-if="remotesearch">' +
        '           <input type="text" class="search" @input="onSearch($event)">' +
        '       </div>' +
        '       <div class="my-options" ref="options">' +
        '           <ul>' +
        '               <li v-for="item in data" :data-value="item.value" @click.stop="onSelectChange(item.value)" :class="{\'active\':currentData.value===item.value}">' +
        '                   {{item.name}}' +
        '               </li>' +
        '           </ul>' +
        '       </div>'+
        '    </div>' +
        '  </div>',
    props: {
        ctxpath: {
            type: String,
            required: true
        },
        data: {
            type: Array,
            required: true,
            validate: function (value) {
                var keyValidate = value.map(item => !!item.name && !!item.value)
                return keyValidate.indexOf(false) === -1;
            }
        },
        remotesearch:{
            type: Boolean,
            default:function () {
                return false;
            }
        }
    },
    data: function () {
        return {
            currentData: {},
            betterScrollOption: {
                mouseWheel: {}
            },
            yearSelectionScroll: null
        }
    },
    watch: {
        data: function (newVal, OldVal) {
            var self = this;
            if(newVal){
                self.defaultSelect();
            }
        }
    },
    methods: {
        bindSelectionScroll: function () {
            if (!this.yearSelectionScroll) {
                var wrapper = this.$refs.options;
                var bs = BetterScroll.createBScroll(wrapper, this.betterScrollOption);
                this.yearSelectionScroll = bs;
            }
        },
        unbindSelectionScroll: function () {
            if (this.yearSelectionScroll) {
                this.yearSelectionScroll.destroy();
                this.yearSelectionScroll = null;
            }
        },
        onSelectClicked: function () {
            this.$refs.optionList.style.cssText = 'display: block;';
            this.bindSelectionScroll();
            let extraTransform = {
                // 起点的属性
                start: {
                    scale: 0
                },
                // 终点的属性
                end: {
                    scale: 1.1
                }
            }
            this.yearSelectionScroll.scrollTo(0, 0, 300, undefined, extraTransform)
        },
        onSelectChange: function (value) {
            this.currentData = this.data.find(function (item) {
                return item.value === value;
            });
            this.$emit('change', value);
            this.$refs.optionList.style.cssText = 'display: none;'
            this.unbindSelectionScroll();
        },
        hideList: function () {
            this.$refs.optionList.style.cssText = 'display: none;'
            this.unbindSelectionScroll();
        },
        defaultSelect: function () {
            var selectedData = this.data.find(function (item) {
                return !!item.selected;
            })
            if (selectedData) {
                this.currentData = Object.assign({}, selectedData);
            } else {
                this.currentData = Object.assign({}, this.data[0]);
            }
            this.$emit('change', this.currentData.value);
        },
        clickCoutsideHandler: function (element, callback) {
            return function (e) {
                function clickOutside(e) {
                    return !element.contains(e.target);
                }

                var isClickOutside = clickOutside(e);
                callback(isClickOutside);
            }
        },
        bindSelectionClickOutside: function (element, callback) {
            document.addEventListener('click', this.clickCoutsideHandler(element, callback));
        },
        unbindSelectionClickOutside: function (element, callback) {
            document.removeEventListener('click', this.clickCoutsideHandler(element, callback));
        },
        clickOutsideAndHideList: function (isClickOutside) {
            isClickOutside && this.hideList();
        },
        onSearch(evt){
            this.$emit('search', evt.target.value)
        },
        getCurrentData(){
            return this.currentData
        }
    },
    mounted: function () {
        var self = this;
        self.defaultSelect();
        self.bindSelectionClickOutside(self.$refs.parent, self.clickOutsideAndHideList);
    },
    unmount: function () {
        var self = this;
        self.unbindSelectionClickOutside(self.$refs.parent, self.clickOutsideAndHideList);
    }
}